<template>
  <section class="component legal-urge-action-area">
    <el-steps :space="200" :active="activeIndex" finish-status="success" :center="true">
      <el-step :title="name" :key="name" v-for="{name} in stepsArray"></el-step>
    </el-steps>

    <!-- <template v-if="useShow"> -->
    <component @save="saveCallback" :needErrorMsg="needErrorMsg" :isDetail="isDetail" :is="activeComponent" :ref="activeComponent" :topInfo="topInfo" @emitSuccess="emitSuccess" @nextStep="nextStep" @finishCase="finishCase" @previousStep="previousStep" :id="id" :operatorId="operatorId"></component>
    <!-- </template> -->

    <!-- <template v-else>
      <FilingStep :needErrorMsg="true" v-show="ativeComponent('filing-step')" :isDetail="isDetail" :topInfo="topInfo" @emitSuccess="emitSuccess" @nextStep="nextStep" @finishCase="finishCase" @previousStep="previousStep" :id="id" :operatorId="operatorId" />
      <HoldCourtStep :needErrorMsg="true" v-show="ativeComponent('hold-court-step')" :isDetail="isDetail" :topInfo="topInfo" @emitSuccess="emitSuccess" @nextStep="nextStep" @finishCase="finishCase" @previousStep="previousStep" :id="id" :operatorId="operatorId" />
      <CloseCaseStep :needErrorMsg="true" v-show="ativeComponent('close-case-step')" :isDetail="isDetail" :topInfo="topInfo" @emitSuccess="emitSuccess" @nextStep="nextStep" @finishCase="finishCase" @previousStep="previousStep" :id="id" :operatorId="operatorId" />
      <EnclosureStep  v-show="ativeComponent('enclosure-step')" :isDetail="isDetail" :topInfo="topInfo" @emitSuccess="emitSuccess" @nextStep="nextStep" @finishCase="finishCase" @previousStep="previousStep" :id="id" :operatorId="operatorId" />
      <ImplementStep :needErrorMsg="true" v-show="ativeComponent('implement-step')" :isDetail="isDetail" :topInfo="topInfo" @emitSuccess="emitSuccess" @nextStep="nextStep" @finishCase="finishCase" @previousStep="previousStep" :id="id" :operatorId="operatorId" />
    </template> -->

  </section>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { component, steps } from './legal-urage-action-area/'
import { Prop, Emit, Watch } from "vue-property-decorator";
import { namespace } from 'vuex-class';

import FilingStep from './legal-urage-action-area/filing-step.vue'
import HoldCourtStep from './legal-urage-action-area/hold-court-step.vue'
import CloseCaseStep from './legal-urage-action-area/close-case-step.vue'
import EnclosureStep from './legal-urage-action-area/enclosure-step.vue'
import ImplementStep from './legal-urage-action-area/implement-step.vue'

const CollectionExecutionModule = namespace('collection-execution');


@Component({
  components: {
    // ...component,
    FilingStep,
    HoldCourtStep,
    ImplementStep,
    CloseCaseStep,
    EnclosureStep,
  }
})


export default class LegalUrgeActionArea extends Vue {
  @CollectionExecutionModule.Getter
  private collectonData;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private currentSavedStep;
  @CollectionExecutionModule.Mutation private updateCurrentSavedStep;

  @Prop({ type: String, required: false })
  private id: string;
  @Prop({ type: String }) private operatorId
  @Prop() private topInfo
  @Prop({ type: Boolean }) private isDetail
  @Prop({ type: Boolean }) private useShow


  private stepsArray = steps
  private activeIndex: number = 0;
  private submitLoading: boolean = false;
  private needErrorMsg: boolean = true

  @Watch('currentSavedStep', { immediate: true }) private showPersonalName (val) {
    console.log('watch currentSavedStep', val);

    if (val !== '') {
      this.activeIndex = val
    }
  }


  // private componentMap: any = {
  //   0: 'filing-step',
  //   1: 'hold-court-step',
  //   2: 'implement-step',
  //   3: 'close-case-step',
  //   4: 'enclosure-step'
  // }

  @Emit('close') private emitClose () { }

  @Emit("success")
  private emitSuccess () {
    this.emitClose()
  }
  @Emit("refreshData")
  private refreshData () { }

  private get activeComponent () {
    return steps[this.activeIndex].component
  }

  private saveCallback (data) {
    this.$emit('saveCallback', data)
  }

  /**
   * 下一步
   */
  private nextStep () {
    this.activeIndex++
  }
  /**
   * 上一步
   */
  private previousStep () {
    this.activeIndex--
  }

  /**
   * 结案
   */
  private finishCase () {
    this.activeIndex = 3
  }

  // private ativeComponent (type: string) {
  //   return this.componentMap[this.activeIndex] === type
  // }

  private setNeedErrorMsg (val) {
    this.needErrorMsg = val
    console.log('setNeedErrorMsg',this.needErrorMsg);
  }

  private destroyed () {
    this.updateCurrentSavedStep('')
  }

}

</script>

<style lang="less">
.el-steps--horizontal {
  margin-left: 70px;
}
</style>